var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false,
});
var app = {};

var option;

option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    min: -50,
    max: 50,
    type: "value",
  },
  xAxis: {
    min: -50,
    max: 50,
    type: "value",
  },
  series: [
    {
      type: "custom",
      data: [undefined],
      renderItem(params, api) {
        const [startx, startY] = api.coord([-20, 20]);
        console.log(api.style());
        return {
          type: "rect",
          shape: {
            x: startx,
            y: startY,
            width: 20,
            height: 20,
          },
          style: {
            ...api.style(),
            fill: "#5470c6cc",
          },
        };
      },
    },
  ],
};

if (option && typeof option === "object") {
  myChart.setOption(option);
}

window.addEventListener("resize", myChart.resize);
